<template>
	<view class="content">
	  <view class="tabBar">
	  	 <view class="tabBarItem" v-for="(item, i) in tabs" :key='i' 
		    @click="currTab = i"
		    :class="currTab===i?'active':''">
	  	 	{{item.label}}
	  	 </view>
	  </view>
	  <view class="orderlist">
	  	<scroll-view  
		    v-if='list.length > 0'
		    class="scroll-Y" 
		    scroll-y="true"
			refresher-enabled='true'
			:refresher-triggered='refreshe'
			@refresherrefresh='update'
			lower-threshold='0'
			@scrolltolower="lower">
			<view  class="scroll-view-item" v-for='(item, i) in list' :key='i'>
				<view class="order-title" @click="goDetail(item)">订单号：{{item.sn}}</view>
				<view class="order-info" @click="goDetail(item)">
				  <view class="infoItem">
					  <text class="title">服务项目:</text>
					  <text class="info">{{item.washMenuName}}</text>
				  </view>
				  <view class="infoItem">
					  <text class="title">车俩信息:</text>
					  <text class="info">{{item.licensePlate}} &nbsp;| &nbsp;{{item.color}} |&nbsp;{{item.cartType}}</text>
				  </view>
				  <view class="infoItem">
					  <text class="title">服务时间:</text>
					  <text class="info">{{item.appointmentTime}}</text>
				  </view>
				  <!-- <view class="infoItem">
					  <text class="title">订单金额:</text>
					  <text class="info"></text>
				  </view> -->
				  <view class="infoItem">
					  <text class="title">订单状态:</text>
					  <text class="info">{{item.orderStatus === 1?'待服务': item.orderStatus === 5?'已取消':'已完成'}}</text>
				  </view>
				</view>
				<view class="order-cancel" v-if='item.orderStatus - 2 < 0'>
					<button class="btn" @click="cancelWash(item.sn)" type="default">取消预约</button>
				</view>
			</view>
		</scroll-view>
        <no-list tipInfo="你还没有该类型的订单" v-else></no-list>
	  </view>
	  <uni-popup ref="orderPopup" :mask-click="false">
	  	 <view class="popup-content">
	  		<view class="popup-title">温馨提示</view>
	  		<view class="popup-tip-info">
	  			{{msg}}
	  		</view>
	  		<view class="popup-btns">
	  			<button class="btn " type="default" @click="sureCancel">确认取消</button>
	  			<button class="btn btn1" type="primary" @click="close">再想想</button>
	  		</view>
	  	 </view>
	  </uni-popup>
	</view>
</template>

<script>
    import {myOrders, cancelOrder, validateOrder} from "@/untils/api"
	export default {
		data() {
			return {
				tabs:[{label:'全部订单',value:'ALL'}, {label:'待服务',value:'INIT'}, {label:'已完成',value:'FINISH'}, {label:'已取消',value:'CANCEL'}],
				params:{
					orderStatus:'ALL',
					pageNum:1,
					pageSize:20
				},
				allTotal:0,
				list:[],
				currTab:0,
				msg:'',
				refreshe:false
			}
		},
		watch: {
			currTab(value) {
				this.params.pageNum = 1
				this.getMyOrders()
			}
		},
		onShow() {
		  this.getMyOrders()
		},
		methods: {
		  goDetail(obj){
			uni.navigateTo({
				url:'/subpackage/order/orderInfo?id='+obj.sn
			}) 
		  },
		  cancelWash(sn){
			 this.currSn = sn
			 validateOrder({sn}).then((res) => {
				 const{code,msg} = res;
				 if(code === 4003 ){
					 this.msg = msg
					 this.$refs.orderPopup.open()
				 }else if(code === 200){
					 this.sureCancel()
				 }
			 })
		  },
		  sureCancel(){
             cancelOrder({sn:this.currSn}).then((res) => {
				 if(res.code - 200 === 0){
					 uni.showToast({
						 icon:'none',
						 title:'取消成功'
					 })
					this.params.pageNum = 1
                    this.getMyOrders()
				 }else{
					uni.showToast({
						 icon:'none',
						 title:res.msg
					 })
				 }
				 this.close()
			 })
		  },
		  close(){
            this.$refs.orderPopup.close()
		  },
          lower(e){
			  if(this.list.length >= this.allTotal){
				  console.log('已请求完所有数据…')
				  return false;
			  }
			  this.params.pageNum += 1
			  this.getMyOrders()
		  },
		  update(){
			  this.refreshe = true
			  setTimeout(() => {
				  this.params.pageNum = 1
				  this.refreshe = false
				  this.getMyOrders()
			  },1000)
		  },
		  getMyOrders(){
			  this.params.orderStatus = this.tabs[this.currTab].value
			  myOrders(this.params).then((res) => {
				  if(this.params.pageNum - 1 === 0){
                    this.list = res.data?.records || []
				  }else{
					  this.list.push(...res.data?.records)
				  }
				  this.allTotal = res.data.total
			  })
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		position: relative;
		overflow: hidden;
		height: 100%;
		background: #eee;
		flex: 1;
		.orderlist{
			height: calc(100% - 120rpx);
			overflow: hidden;
			width: 100%;
			.scroll-Y{
			  width: 700rpx;
			  margin:  0 auto;
			  height: calc(100% - 20rpx);
			  overflow-y: auto;
			  .scroll-view-item{
				  margin-top: 40rpx;
				  background: #fff;
				  border-radius: 20rpx;
				  // height: 312rpx;
				  font-size: 28rpx;
				  .order-title{
					  color: #2A2B2B;
					  width: 90%;
					  margin: 0 auto;
					  line-height: 80rpx;
					  border-bottom: 1px solid #f9f9f9;
				  }
				  .order-info{
					  width: 90%;
					  margin: 0 auto;
					  color: #AEB3B3;
					  padding: 20rpx 0;
					  .infoItem{
						  line-height: 60rpx;
						  display: flex;
						  justify-content: space-between;
						  align-items: center;
						  .title{
							width: 200rpx;
						  }
						  .info{
							  text-align: left;
						  }
					  }
				  }
				  .order-cancel{
					  border-top: 1px solid #f9f9f9;
					  overflow: hidden;
					  .btn{
						  background: #FF3E3E;
						  width: 200rpx;
						  height: 80rpx;
						  line-height: 80rpx;
						  border-radius: 100rpx;
						  color: #fff;
						  font-size: 30rpx;
						  float: right;
						  margin: 20rpx 0;
						  margin-right: 40rpx;
					  }
				  }
			  }
			  .scroll-view-item:nth-last-child(1){
				  margin-bottom: 20rpx;
			  }
			}
		}
		.popup-content{
			width: 550rpx;
			height: 300rpx;
			padding: 40rpx;
			background:#fff;
			border-radius: 10rpx;
			font-size: 24rpx;
			text-align: center;
			padding-top: 80rpx;
			background: #fff linear-gradient( 180deg, rgba(2,177,170,0.12) 0%, rgba(0,214,142,0) 20%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.popup-title{
				font-size: 32rpx;
				font-weight: 600;
				line-height: 40rpx;
			}
			.popup-tip-info{
				line-height: 46rpx;
				margin: 40rpx 0;
			}
			.popup-btns{
				width: 500rpx;
				margin: 0 auto;
				display: flex;
				.btn{
					height: 80rpx;
					line-height: 80rpx;
					font-size: 26rpx;
					margin-bottom: 30rpx;
					width: 200rpx;
				}
				.btn1{
					background: #02B1AA;
				}
			}
		 }
	}
		.tabBar{
			width: 100%;
			overflow: hidden;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			height: 120rpx;
			line-height: 120rpx;
			.tabBarItem{
				width: auto;
				// padding: 0 40rpx;
				font-size: 30rpx;
				color: #242941;
			}
			.tabBarItem.active{
			  border-bottom: 10rpx solid #02B1AA;
			  box-sizing: border-box;
			  line-height: 110rpx;
			  font-size: 36rpx;
			  font-weight: 800;
			}
		}
</style>
